
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<html>
<head>
<title>Deffense Page</title>
<link rel="stylesheet" type="text/css"
	href="<c:url value="/css/tables.css" />" />
<link rel="stylesheet" type="text/css"
	href="<c:url value="/css/button.css" />" />
<link rel="stylesheet"
	href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
	$(function() {

		$("#dialogDelete")
				.dialog(
						{

							resizable : false,
							height : 230,
							width : 500,
							autoOpen : false,
							show : {
								effect : "blind",
								duration : 250
							},
							hide : {
								effect : "scale",
								duration : 250
							},
							buttons : {
								"Delete Deffense" : function() {

									var e = document
											.getElementById("deffenseSelect");
									var deffenseValue = e.options[e.selectedIndex].value;

									$
											.post(
													"http://127.0.0.1:8080/fight-robot/deffense-service/deleteDeffense",
													{
														deffenseId : deffenseValue
													});

									$(this).dialog("close");

								},
								Cancel : function() {
									$(this).dialog("close");
								}
							},
							close : function() {

								location.reload(true);
							}

						});
		$("#buttonDelete").click(function() {
			$("#dialogDelete").dialog("open");
		});
	});

	$(function() {
		$("#dialogCreate")
				.dialog(
						{
							resizable : false,
							height : 320,
							width : 500,
							autoOpen : false,
							show : {
								effect : "clip",
								duration : 250
							},
							hide : {
								effect : "scale",
								duration : 250
							},
							buttons : {
								"Create new Deffense" : function() {
									$
											.post(
													"http://127.0.0.1:8080/fight-robot/deffense-service/createDeffense",
													{
														deffenseName : $(
																deffensename)
																.val(),
														deffensePower : $(
																deffensepower)
																.val(),
														deffenseHits : $(
																deffensehits)
																.val()
													});
									$(this).dialog("close");

								},

								Cancel : function() {
									$(this).dialog("close");
								}
							},
							close : function() {
								location.reload(true);
							}
						});
		$("#buttonCreate").click(function() {
			$("#dialogCreate").dialog("open");
		});
	});

	$(function() {

		var table = document.getElementById('tableID'), cells = table
				.getElementsByTagName('td');

		//alert(table.rows[1].cells[1].innerHTML);
		//var e = table.rows[1].cells[1].innerHTML;

		//alert(e);

		//;

		$("#dialogEdit")
				.dialog(
						{
							resizable : false,
							height : 320,
							width : 500,
							autoOpen : false,
							show : {
								effect : "clip",
								duration : 250
							},
							hide : {
								effect : "scale",
								duration : 250
							},
							buttons : {
								"Edit Deffense" : function() {
									var e = document
											.getElementById("deffenseSelect");
									var deffenseValue = e.options[e.selectedIndex].value;

									$
											.post(
													"http://127.0.0.1:8080/fight-robot/deffense-service/editDeffense",
													{
														deffenseId : deffenseValue,
														deffenseName : $(
																deffensenameEdit)
																.val(),
														deffensePower : $(
																deffensepowerEdit)
																.val(),
														deffenseHits : $(
																deffensehitsEdit)
																.val()
													});

									$(this).dialog("close");

								},

								Cancel : function() {
									$(this).dialog("close");
								}
							},
							close : function() {

								location.reload(true);
							},
							open : function() {
								$("#deffensenameEdit").val(
										table.rows[1].cells[1].innerHTML);
								$("#deffensepowerEdit").val(
										table.rows[1].cells[2].innerHTML);
								$("#deffensehitsEdit").val(
										table.rows[1].cells[3].innerHTML);

							}
						});
		$("#buttonEdit").click(function() {
			$("#dialogEdit").dialog("open");
		});
	});

	function displayDeffense() {
		var e = document.getElementById("deffenseSelect");
		var deffenseValue = e.options[e.selectedIndex].value;

		$
				.get(
						'http://127.0.0.1:8080/fight-robot/deffense-service/getDeffense?deffenseId='
								+ deffenseValue,
						function(data) {
							if (!data || data === "") {
								// error
								return;
							}
							var foundDeffense;
							try {
								foundDeffense = jQuery.parseJSON(data);
							} catch (e) {
								// error
								return;
							}
							var table = document.getElementById('tableID'), cells = table
									.getElementsByTagName('td');

							table.rows[1].cells[0].innerHTML = foundDeffense.idDeffense;
							table.rows[1].cells[1].innerHTML = foundDeffense.name;
							table.rows[1].cells[2].innerHTML = foundDeffense.power;
							table.rows[1].cells[3].innerHTML = foundDeffense.hits;

						}, "text");
	}
</script>
</head>
<body>
	<center>
		<select name='deffenseSelect' id='deffenseSelect'
			onchange="displayDeffense()">
			<option value="${deffenseSelected}" selected>${selected}</option>
			<c:forEach var="deffense" items="${deffenseMap}">
				<option value="${deffense.key}">${deffense.value}</option>
			</c:forEach>
		</select></br>

		<table id='tableID'>
			<thead>
				<tr>
					<th>Id</th>
					<th>Name</th>
					<th>Power</th>
					<th>Hits</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
				</tr>
			</tbody>
		</table>

		<button type="button" id="buttonCreate" class="button medium brown">Create
			Deffense</button>
		<button type="button" id="buttonEdit" class="button medium brown">Edit
			Deffense</button>
		<button type="button" id="buttonDelete" class="button medium brown">Delete
			Deffense</button>

	</center>



	<!-- <button id="opener">Open Dialog</button> -->
</body>
<div id="dialogDelete" title="Delete Deffense">
	<p>Are you sure you want to proceed? Changes could not be undone!</p>

</div>

<!-- Dialog Create -->
<div id="dialogCreate" title="Create new Deffense">
	<form>
		<fieldset>
			<label for="name">Name </label> <input type="text" name="name"
				id="deffensename" class="text ui-widget-content ui-corner-all" /> <br>
			<br> <label for="power">Power</label> <input type="text"
				name="power" id="deffensepower"
				class="text ui-widget-content ui-corner-all" /> <br> <br>
			<label for="hits">Hits </label> <input type="text" name="hits"
				id="deffensehits" class="text ui-widget-content ui-corner-all" /> <br>
		</fieldset>
	</form>
</div>


<!-- Dialog Edit  -->

<div id="dialogEdit" title="Edit Deffense">
	<form>
		<fieldset>
			<label for="name">Name </label> <input type="text" name="name"
				id="deffensenameEdit" class="text ui-widget-content ui-corner-all" />
			<br> <br> <label for="power">Power</label> <input
				type="text" name="power" id="deffensepowerEdit" value=""
				class="text ui-widget-content ui-corner-all" /> <br> <br>
			<label for="hits">Hits </label> <input type="text" name="hits"
				id="deffensehitsEdit" value=""
				class="text ui-widget-content ui-corner-all" /> <br>
		</fieldset>
	</form>
</div>

</html>